<template>
  <div class="register_container">
    <div class="register_title">图书管理系统用户注册页面</div>
    <div class="register_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/images/a.jpg" alt="" />
      </div>
      <el-form ref="registerFormRef" :model="registerForm" :rules="registerFormRules" label-width="0px" class="register_form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model.trim="registerForm.username" prefix-icon="iconfont icon-gerenxinxi" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="registerForm.password" prefix-icon="iconfont icon-tianchongxing-" type="password" placeholder="请输入密码"
                    @keyup.enter.native="register" :show-password="true"></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item prop="confirmPassword">
          <el-input v-model="registerForm.confirmPassword" prefix-icon="iconfont icon-tianchongxing-" type="password" placeholder="请确认密码"
                    @keyup.enter.native="register" :show-password="true"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="register" :loading="registerLoading">注册</el-button>
          <el-button type="info" @click="resetRegisterForm">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
    <!--粒子插件特效-->
    <vue-particles class="login-bg" color="#39AFFD" :particleOpacity="0.7" :particlesNumber="100" shapeType="circle"
      :particleSize="4" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
      :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
    </vue-particles>
    <div class="footer">
       <span style="font-weight: bold;color:white;">
        返回用户登录
      </span>
      <span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
    </div>
    <div class="footer2">
      <p slot="reference"> 网&nbsp;&nbsp;页&nbsp;&nbsp;制&nbsp;&nbsp;作&nbsp;&nbsp;|&nbsp;&nbsp;©2024-2025 Make YngaLibrary WebSite</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 验证密码是否一致
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };

    return {
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
      },
      registerFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ],
      },
      registerLoading: false
    };
  },
  methods: {
    register() {
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) return;
        this.registerLoading = true;

        // 进行md5加密
        const salt = "ynga";
        const username = this.registerForm.username;
        const password = this.registerForm.password;

        try {
          // 向数据库发送axios请求，如果注册成功，就跳转
          const { data: res } = await this.$http.post(
              "user/register",
              {
                username,
                password
              }
          );

          if (res.status !== 200) {
            this.registerLoading = false;
            return this.$message.error(res.msg);
          }

          this.$message.success("注册成功");
          this.registerLoading = false;
          this.$router.push("/login"); // 跳转到登录页面
        } catch (error) {
          this.registerLoading = false;
          this.$message.error("注册失败，请稍后再试");
        }
      });
    },
    resetRegisterForm() {
      this.$refs.registerFormRef.resetFields();
    },
    goUser() {
      this.$router.push("/login");
    },
  }
};
</script>

<style lang="less" scoped>
.footer2 {
  position: fixed;
  bottom: 5px;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  font-size: 14px; /* 可以根据需要调整字体大小 */
  letter-spacing: 0.5px; /* 调整字母间距，使文本更美观 */
  word-spacing: 2px;/*设置文字间距*/
  color: #ccc;

  a {
    color: #ccc;
  }
}

.register_container {
  // background-color: #2b4b6b;
  //background: url(https://my-web-management.oss-cn-hangzhou.aliyuncs.com/backg_ph.jpg) no-repeat 0px 0px;
  background: url("../assets/images/web.jpg");
  background-size: cover;
  height: 100%;
}

.register_box {
  height: 360px;
  width: 450px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.register_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.register_title {
  position: relative;
  top: 8%;
  font-size: 36px;
  color: white;
  text-align: center;
  font-weight: 700;
  border-radius: 8px; /* 圆角效果 */
  //控制字体间距
  letter-spacing: 10px;
}

.footer {
  display: flex;
  position: absolute;
  flex-direction: column;
  bottom: 0;
  right: 3%;
  width: 100px;
  height: 120px;

  // background-color: pink;
  span {
    // width: 100%;
    // background-color: red;
    text-align: center;
  }
}
</style>
